<template >
  <a-layout style="min-height: 100vh">
    123
    <a-layout-sider collapsible>
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="handleClickMenu">
        <!-- <a-menu-item v-for="item in routers" :key="item.path">
          <component :is="item.meta.icon"></component>
          <span>{{ item.meta.title }}</span>
        </a-menu-item> -->
        <MenuRender :routers="routers" />

        <!-- <a-menu-item key="1">
          <pie-chart-outlined />
          <span>Option 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <desktop-outlined />
          <span>Option 2</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>User</span>
            </span>
          </template>
          <a-menu-item key="3">Tom</a-menu-item>
          <a-menu-item key="4">Bill</a-menu-item>
          <a-menu-item key="5">Alex</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>Team</span>
            </span>
          </template>
          <a-menu-item key="6">Team 1</a-menu-item>
          <a-menu-item key="8">Team 2</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="9">
          <file-outlined />
          <span>File</span>
        </a-menu-item> -->
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="{ background: '#fff', padding: 0, height: '64px' }" />
      <a-layout-content style="margin: 0 16px">
        <div :style="{ padding: '24px', background: '#fff', height: 'calc(100vh - 104px)', marginTop: '20px' }">
          <router-view></router-view>
        </div>
      </a-layout-content>

    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import {
  HomeOutlined,
  MenuOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'
import { reactive } from 'vue'
// import { routers } from '@/router'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import MenuRender from '@/components/MenuRender.vue'

export default {
  components: {
    HomeOutlined,
    MenuOutlined,
    SettingOutlined,
    MenuRender
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    // console.log(, 'route')
    const selectKeys = reactive([route.path])
    const handleClickMenu = ({ key }: { key: string }) => {
      selectKeys[0] = key
      router.push(key)
    }
    return {
      routers: store.state.router.dynamicRouter,
      handleClickMenu,
      selectedKeys: selectKeys

    }
  }
}
</script>
<style lang="scss"></style>
